<template>
  <div>
    <el-table
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      :height="listQuery.total>0 ? 'calc(100vh - 270px)' : 'calc(100vh - 235px)'"
    >
      <el-table-column align="center" label="序号" width="50" type="index"/>

      <el-table-column width="180px" align="center" label="预览 ">
        <template slot-scope="{row}">
          <div class="image-slot">
             <template v-if="row.imgURL">
                <el-image :src="row.imgURL" :preview-src-list="[row.imgURL]" fit="fill" style="width: 150px; height: 100px">
                </el-image>
              </template>
              <template v-else>
                <el-image>
                <div slot="error">
                  <i class="el-icon-picture-outline"></i>
                </div>
                </el-image>
              </template>
          </div>
        </template>
      </el-table-column>

      <el-table-column min-width="300px" align="center" label="信息">
        <template slot-scope="{row}">
          <span>
            <el-tag>{{ row.title }}</el-tag>
            <!-- <el-button style="border:none;" size="mini" @click="handleUpdateTitle(row)" plain><i class="el-icon-edit" /></el-button> -->
          </span>
          <hr style="color:white;border:none;">
          <span>{{ row.updatedAt }}</span>
          <hr style="color:white;border:none;">
          <span>By Users</span>
        </template>
      </el-table-column>

      <el-table-column
        class-name="status-col testtttt"
        label="类型"
        min-width="110"
      >
        <template slot-scope="{row}">
          <template v-for="item in templateList">
              <template v-if="item['key'] == row.type">{{item.label}}</template>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        label="属性"
        min-width="110"
      >
        <template slot-scope="{row}">
          <template v-for="item in templateAttributeList">
              <template v-if="item['key'] == row.attribute">{{item.label}}</template>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        min-width="150px"
        align="center"
        label="创建时间"
      >
        <template slot-scope="{row}">
          <span>{{ row.createdAt }}</span>
        </template>
      </el-table-column>
      <el-table-column
          :label="$t('table.actions')"
          align="center"
          min-width="250"
          class-name="fixed-width"
        >
          <template slot-scope="{row}">
            <el-button
              size="mini"
              @click="handleEditEdmTemplate(row)"
              type="primary"
              plain
            >
              {{ $t('table.edit') }}
            </el-button>
            <!-- <el-button
              size="mini"
              type="primary"
              @click="handleModifyStatus(row,'published')"
              plain
            >
              克隆
            </el-button>
            <el-button
              size="mini"
              type="success"
              @click="handleModifyStatus(row,'published')"
              plain
            >
              分享
            </el-button> -->
            <el-button slot="reference" size="mini" type="danger" plain @click="handleDelete(row)">删除</el-button>
            <!-- <el-button
              size="mini"
              type="warning"
              @click="handleDelete1(row, $index)"
              plain
            >
              预览
            </el-button> -->
          </template>
        </el-table-column>
    </el-table>
    <pagination
      v-show="listQuery.total>0"
      :total="listQuery.total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>
<script lang="ts">
import storage from '@/utils/storage'
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import Pagination from '@/components/Pagination/index.vue'
import { getAction, postAction } from '@/api/common'

@Component({
  name: 'TabPane',
  components: {
    Pagination
  }
})
export default class extends Vue {
  /// //////////////////////////////////////////////////////////////////////////////
  private listQuery = {
    page: 1,
    limit: 5,
    total: 0,
    title: undefined,
    attribute: undefined,
    type: undefined,
    createdAt: undefined
  }

  public templateList = [
    { label: '邮件模板', key: '1' },
    { label: '落地页模板', key: '2' },
    { label: '其他模板', key: '3' }
  ]

  public templateAttributeList = [
    { label: '私有', key: '1' },
    { label: '公共', key: '2' },
    { label: '分享', key: '3' }
  ]

  private list : any[] = []

  created() {
    this.getList()
  }

  public async getList() {
    this.loading = true
    const { data } = await postAction(this.listQuery, 'EmailTemplate/index')
    this.list = data.items
    if (this.list !== null) {
      this.list.forEach((data: any, index: any) => {
        this.list[index].imgURL = this.getCacheImage(data.id)
      })
    }
    this.listQuery.total = data.total
    this.loading = false
  }

  public getCacheImage(id: any) {
    const keyName = 'crm_email_template_id_' + id
    return storage.get(keyName)
  }

  private async handleDelete(row: any) {
    this.$confirm('确认要删除吗？', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      getAction({ id: row.id }, 'EmailTemplate/Delete').then((res: any) => {
        if (res.code === 20000) {
          this.$message({ message: '删除成功', type: 'success' })
          this.getList()
        } else {
          this.$message({ message: '删除失败', type: 'warning' })
        }
      })
    }).catch(async() => {
      console.log('catch')
    })
  }

  private async handleEditEdmTemplate(row: any) {
    this.$router.push('/email/emailTemplate/edit?id=' + row.id)
  }

  @Watch('getListQuery', { deep: true })
  private watchGetListQuery(newVal: any) {
    this.listQuery = newVal
  }

  /// //////////////////////////////////////////////////////////////////////////////
  @Prop({ default: 'CN' }) private type!: string
  @Prop({ }) private getListQuery!: object

  private loading = false

  private async handleUpdateTitle(row: any) {
    await getAction({ id: row.id, title: row.title }, 'EmailTemplate/UpdateTitle')
  }

  // private getImage() {
  //   const imgBase64 = this.htmlToImage()
  //   return '<img src=' + imgBase64 + "alt='预览'></img>"
  // }
}
</script>

<style scoped>
  .image-slot{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 155px;
    height: 100px;
    background: #f5f7fa;
    color: #909399;
    font-size: 36px;
  }
</style>
